﻿@{
    Layout = "_LayoutH";
    @model Wms_stockindetail
}
@section styles{
    <link rel="stylesheet" href="~/css/bootstrap-select.min.css" />
}
<div id="app" v-cloak>
    <form class="form-horizontal" onsubmit="return false">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label">物料</label>
                <div class="col-sm-10">
                    <select size="1" id="MaterialId" v-model="MaterialId" class="show-menu-arrow show-tick selectpicker form-control" data-live-search="true"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">计划数量</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="PlanInQty" v-focus type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">实际数量</label>
                <div class="col-sm-10">
                    <input class="form-control" v-model="ActInQty" v-focus type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label col-sm-2">货架</label>
                <div class="col-sm-10">
                    <select size="1" id="StoragerackId" v-model="StoragerackId" class="show-menu-arrow show-tick selectpicker form-control" data-live-search="true"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <textarea v-model="Remark" class="form-control" rows="3" placeholder="备注...100个字符以内"></textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">{{count}}</em>/100</p>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="pull-right box-tools">
                <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
            </div>
        </div>
    </form>
</div>

@section scripts{
    <script src="~/js/bootstrap-select.min.js"></script>
    <script src="~/js/defaults-zh_CN.min.js"></script>
    <script>
        $(function () {
            $('#MaterialId').on('show.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                var divdom = $("div[class='bs-searchbox']")[0].childNodes[0];
                $(divdom).on("input propertychange", function () {
                    var dom = $("li[class='no-results']");
                    var text = divdom.value;
                    if (dom.length > 0) {
                        app.searchMaterial(text, 2);
                    }
                    if (app.MaterialList.length <= 0) {
                        app.searchMaterial(text, 2);
                    }
                    //if (dom.length > 0) {
                    //    yui.$axiosget('/Material/Search?text=' + text).then(function (res) {
                    //        var data = res.data.rows;
                    //        var html = "<option value=''>请选择</option>";
                    //        for (var item in data) {
                    //            html += "<option value='" + data[item].MaterialId + "' " + "data-subtext='" + data[item].MaterialNo + "'>" + data[item].MaterialName + "</option>"
                    //        }
                    //        $("#MaterialId").empty();
                    //        $("#MaterialId").append(html)
                    //        $('#MaterialId').selectpicker('refresh');
                    //    }).catch(function (res) {
                    //    });
                    //} else {
                    //    yui.$axiosget('/Material/Search?text=' + text).then(function (res) {
                    //        var data = res.data.rows;
                    //        var html = "<option value=''>请选择</option>";
                    //        for (var item in data) {
                    //            html += "<option value='" + data[item].MaterialId + "' " + "data-subtext='" + data[item].MaterialNo + "'>" + data[item].MaterialName + "</option>"
                    //        }
                    //        $("#MaterialId").empty();
                    //        $("#MaterialId").append(html)
                    //        $('#MaterialId').selectpicker('refresh');
                    //    }).catch(function (res) {
                    //    });
                    //}
                });
            });

            $('#StoragerackId').on('show.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                var divdom = $("div[class='bs-searchbox']")[0].childNodes[0];
                $(divdom).on("input propertychange", function () {
                    var dom = $("li[class='no-results']");
                    var text = divdom.value;
                    if (dom.length > 0) {
                        app.searchStorageRack(text, 2);
                    }
                    if (app.StorageRackList.length <= 0) {
                        app.searchStorageRack(text, 2);
                    }
                    //if (dom.length > 0) {
                    //    yui.$axiosget('/Storagerack/Search?text=' + text).then(function (res) {
                    //        var data = res.data.rows;
                    //        var html = "<option value=''>请选择</option>";
                    //        for (var item in data) {
                    //            html += "<option value='" + data[item].StorageRackId + "' " + "data-subtext='" + data[item].StorageRackNo + "'>" + data[item].StorageRackName + "</option>"
                    //        }
                    //        $("#StoragerackId").empty();
                    //        $("#StoragerackId").append(html)
                    //        $('#StoragerackId').selectpicker('refresh');
                    //    }).catch(function (res) {
                    //    });
                    //} else {
                    //    yui.$axiosget('/Storagerack/Search?text=' + text).then(function (res) {
                    //        var data = res.data.rows;
                    //        var html = "<option value=''>请选择</option>";
                    //        for (var item in data) {
                    //            html += "<option value='" + data[item].StorageRackId + "' " + "data-subtext='" + data[item].StorageRackNo + "'>" + data[item].StorageRackName + "</option>"
                    //        }
                    //        $("#StoragerackId").empty();
                    //        $("#StoragerackId").append(html)
                    //        $('#StoragerackId').selectpicker('refresh');
                    //    }).catch(function (res) {
                    //    });
                    //}
                });
            });
        });
        var app = new Vue({
            el: "#app",
            data: {
                submit: "添加",
                MaterialId:"@Model.MaterialId",
                StockInId:"@Model.StockInId",
                StockInDetailId:"@Model.StockInDetailId",
                Remark: "@Model.Remark",
                StoragerackId: "@Model.StoragerackId",
                PlanInQty:"@Model.PlanInQty",
                ActInQty: "@Model.ActInQty",
                MaterialList: [],
                StorageRackList: [],
                urlM: '',
                urlS:''
            },
            computed: {
                count: function () {
                    return this.strLength(this.Remark, false);
                }
            },
            mounted: function(){
                var _self = this;
                _self.$nextTick(function () {
                    $("#MaterialId").selectpicker({
                        noneSelectedText: '请选择',
                    });
                    $("#StoragerackId").selectpicker({
                        noneSelectedText: '请选择',
                    });
                    _self.searchMaterial("", 1);
                    _self.searchStorageRack("",1);
                });
            },
            methods: {
                searchMaterial: function (val,type) {
                    _self = this;
                    if (type === 1) {
                        _self.urlS = "/Material/Search";
                    } else {
                        _self.urlS = "/Material/Search?text=" + val;
                    }
                    yui.$axiosget('/Material/Search').then(function (res) {
                        _self.MaterialList = res.data.rows;
                        var html = "<option value=''>请选择</option>";
                        for (var item in _self.MaterialList) {
                            html += "<option value='" + _self.MaterialList[item].MaterialId + "' " + "data-subtext='" + _self.MaterialList[item].MaterialNo + "'>" + _self.MaterialList[item].MaterialName + "</option>"
                        }
                        if (type !== 1) {
                            $("#MaterialId").empty()
                        }
                        $("#MaterialId").append(html)
                        $('#MaterialId').selectpicker('refresh');
                        $('#MaterialId').selectpicker('val', _self.MaterialId);
                    }).catch(function (res) {
                    });
                },
                searchStorageRack: function (val, type) {
                    _self = this;
                    if (type === 1) {
                        _self.urlS = "/StorageRack/Search";
                    } else {
                        _self.urlS = "/StorageRack/Search?text="+val;
                    }
                    yui.$axiosget(_self.urlS).then(function (res) {
                        _self.StorageRackList = res.data.rows;
                        var html = "<option value=''>请选择</option>";
                        for (var item in _self.StorageRackList) {
                            html += "<option value='" + _self.StorageRackList[item].StorageRackId + "' " + "data-subtext='" + _self.StorageRackList[item].StorageRackNo + "'>" + _self.StorageRackList[item].StorageRackName + "</option>"
                        }
                        if (type !== 1) {
                            $("#StoragerackId").empty()
                        }
                        $("#StoragerackId").append(html)
                        $('#StoragerackId').selectpicker('refresh');
                        $('#StoragerackId').selectpicker('val', _self.StoragerackId);
                    }).catch(function (res) {
                    });
                },
                addL: function () {
                   var _self = this;
                    if (_self.MaterialId.length <= 0) {
                        layer.msg("请选择物料", { icon: 2 });
                        return false;
                    }
                    if (!yui.signlessInteger(_self.PlanInQty)) {
                        layer.msg("计划数量为正整数", { icon: 2 });
                        return false;
                    }
                    if (!yui.signlessInteger(_self.ActInQty)) {
                        layer.msg("实际数量为正整数", { icon: 2 });
                        return false;
                    }
                    if (_self.StoragerackId.length <= 0) {
                        layer.msg("请选择入库货架", { icon: 2 });
                        return false;
                    }

                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    var data = {
                        id: _self.StockInDetailId,
                        StockInId: _self.StockInId,
                        MaterialId: _self.MaterialId,
                        StoragerackId: _self.StoragerackId,
                        PlanInQty: _self.PlanInQty,
                        ActInQty: _self.ActInQty,
                        Remark: _self.Remark
                    };
                    yui.$axiospostform('/StockIn/AddOrUpdateD', data)
                        .then(function (response) {
                            if (response.data.Item1 === 101) {
                                layer.tips(response.data.Item2, '.layui-layer-setwin', {
                                    tips: [1, '#3595CC'],
                                    time: 3000
                                });
                                layer.close(index);
                                return false;
                            }
                            if (response.data.Item1) {
                                layer.msg(response.data.Item2, { icon: 1, time: 1000 });
                                setTimeout(function () {
                                    yui.layer_close3();
                                }, 500);
                            } else {
                                layer.msg(response.data.Item2 || errorMsg, { icon: 5 });
                            }
                            layer.close(index);
                        })
                        .catch(function (error) {
                            layer.close(index);
                        });
                }
            }
        });
    </script>
}